<template>
  <FormItem
    :label="label"
    :prop="prop"
    :label-width="labelWidth"
    :rules="rules"
    @click.native.stop
  >
    <i-input
      :type="type"
      :placeholder="placeholder ? placeholder : `请输入${text}`"
      v-model.trim="currentValue"
      @input="onChange"
      :disabled="disabled"
      :size="size"
      :clearable="clearable"
      :password="password"
      @keyup.enter.native="$emit('on-enter')"
      @on-clear="$emit('on-clear')"
      @on-focus="onFocus"
      @on-blur="onBlur"
    >
      <div
        slot="suffix"
        class="eyes-img"
        v-if="eyes"
        @click.stop="eyesVisible = !eyesVisible"
      ><img :src="eyesVisible ? imgs.open : imgs.close" /></div>
    </i-input>
    <div v-if="showList && currentValue" class="value-list-box" v-close>
      <div class="value-list">
        <div v-if="loading && updateListSpinShow" class="loading">加载中</div>
        <template v-else-if="list && list.length">
          <div
            v-for="(o, i) in list"
            :key="i"
            @click="setInputValue(o)"
          >
            {{o.label}}
          </div>
        </template>
        <div v-else-if="currentValue" class="loading">无匹配数据</div>
      </div>
    </div>
    <slot></slot>
  </FormItem>
</template>

<script>
import commonItem from './commonItem'
import { FormItem, Input } from 'view-design'
import eyesClose from './../images/password-hide.png'
import eyesOpen from './../images/password-show.png'
export default {
  name: 'InputItem',
  components: { FormItem, 'i-input': Input },
  mixins: [commonItem],
  data () {
    return {
      eyesVisible: false,
      imgs: {
        open: eyesOpen,
        close: eyesClose
      },
      showList: false,
      updateListSpinShow: false
    }
  },
  computed: {
    type () {
      let o = this.info
      let type = o.type === 'input' ? 'text' : o.type
      if (this.eyes) {
        type = this.eyesVisible ? 'text' : 'password'
      }
      return type
    }
  },
  methods: {
    setInputValue (item) {
      this.listItem = item
      this.currentValue = item.label
      this.list = []
    },
    onFocus () {
      this.showList = true
      this.$emit('focus', this.currentValue, this.info)
      this.onChange()
    },
    onBlur () {
      this.$emit('blur', this.currentValue, this.info)
    },
    async onChange () {
      if (this.currentValue) {
        this.updateListSpinShow = true
        await this._setList()
        this.updateListSpinShow = false
      } else {
        this.list = []
      }
    }
  },
  // 点击空白处关闭下拉框的div事件
  directives: {
    close: {
      inserted (el, binding, vnode) {
        window.onclick = function (e) {
          if (!el.contains(e.target)) {
            vnode.context.showList = false
          }
        }
      }
    }
  }
}
</script>

<style lang="css" scoped>
.eyes-img {
  margin-right: 8px;
  width: 30px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.eyes-img img {
  width: 14px;
  height: initial;
}
.value-list-box {
  height: 0;
  position: relative;
  z-index: 1;
}
.value-list {
  border: 1px solid #dcdee2;
  background-color: white;
  box-shadow: 0 1px 6px rgba(0,0,0,.2);
  margin-top: 3px;
  border-radius: 2px;
  cursor: pointer;
  position: relative;
}
.value-list div {
  padding: 0 8px;
}
.value-list div:hover {
  background-color: rgb(230, 230, 230);
}
.loading {
  text-align: center;
  color: silver;
}
</style>
